<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册管理系统</title>
    <style>
        .main {
            width: 80%;
            /*border: 1px solid #dc127b;*/
            margin: 0 auto;
            text-align: center;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="main">
    <?php
    include 'nav.php';
    ?>
</div>
<form action="postReg.php" method="post" onsubmit="return check()">
    <table border="1" align="center" style="border-collapse: collapse;width: 100%;max-width: 500px" cellpadding="10">
        <tr>
            <td align="right">用户名</td>
            <td><label>
                    <input style="padding: 5px;" name="username" placeholder="用户名只能是字母和（或）数字">     <span class="red">*</span>
                </label>
            </td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td><label>
                    <input style="padding: 5px;" type="password" name="pw"> <span class="red">*</span>
                </label>
            </td>
        </tr>
        <tr>
            <td align="right">重复密码</td>
            <td><label>
                    <input style="padding: 5px;" type="password" name="cpw"> <span class="red">*</span>
                </label>
            </td>
        </tr>
        <tr>
            <td align="right">信箱</td>
            <td><label>
                    <input style="padding: 5px;" name="email">
                </label>
            </td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td>
                <label>
                    <input style="padding: 5px;" type="radio" name="sex" value="男">男
                </label>
                <label>
                    <input style="padding: 5px;" type="radio" name="sex" value="女">女
                </label>
            </td>
        </tr>
        <tr>
            <td align="right">爱好</td>
            <td><label>
                    <input style="padding: 5px;" type="checkbox" name="fav[]" value="听音乐">听音乐
                </label>
                <label>
                    <input style="padding: 5px;" type="checkbox" name="fav[]" value="踢足球">踢足球
                </label>
                <label>
                    <input style="padding: 5px;" type="checkbox" name="fav[]" value="打游戏">打游戏
                </label>
            </td>
        </tr>
        <tr>
            <td align="right"><input type="submit"></td>
            <td><input type="reset"></td>
        </tr>
    </table>
</form>
<script>
    function check(){
        let username = document.getElementsByName('username')[0].value.trim();
        //用户名验证.要求只能是大小写字母、数字，长度为3-10
        let usernameReg = /^[a-zA-Z0-9]{3,10}$/;
        if(!usernameReg.test(username)){
            alert("用户名只能是大小写字母、数字，长度为3-10！");
            return false;
        }
        let pw = document.getElementsByName('pw')[0].value.trim();
        //密码只能是大小写字母、数字、_、-、*，长度为6-10
        let pwReg = /^[A-Za-z0-9_\-*]{6,10}$/;
        if(!pwReg.test(pw)){
            alert("密码只能是大小写字母、数字、_、-、*，长度为6-10！");
            return false;
        }
        let cpw = document.getElementsByName('cpw')[0].value.trim();
        if(cpw !== pw){
            alert("密码和确认密码必须相同！");
            return false;
        }
        let email = document.getElementsByName('email')[0].value.trim();
        let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
        if(email){
            if(!emailReg.test(email)){
                alert("信箱格式不对！");
                return false;
            }
        }
    }
</script>
</body>
</html>